<template>
  <div class="yh_content foSi14">
    <div class="yh_topsearch">
      <div class="yh_dis topsearch_item">
        <div class="search_left">会员卡种类</div>
        <div class="search_right yh_dis">
          <div
            v-for="(item, index) in cardtypelist"
            :key="index"
            class="sons"
            :class="search.cardtypeid === item.id ? 'choiceme' : ''"
            @click.stop="listClick(0,item)"
          >
            {{ item.title }}({{ item.num }})
          </div>
        </div>
      </div>
      <div class="yh_xian" />
      <div class="yh_dis topsearch_item">
        <div class="search_left">会员卡类型</div>
        <div class="search_right yh_dis">
          <div
            v-for="(item, index) in typeoflist"
            :key="index"
            class="sons"
            :class="search.typeofid === item.id ? 'choiceme' : ''"
            @click.stop="listClick(1,item)"
          >
            {{ item.title }}({{ item.num }})
          </div>
        </div>
      </div>

      <div class="yh_xian" />
      <div class="yh_dis topsearch_item">
        <div class="search_left">会员卡种类</div>
        <div class="search_right yh_dis">
          <div
            v-for="(item, index) in cardnamelist"
            :key="index"
            class="sons"
            :class="search.cardnameid === item.id ? 'choiceme' : ''"
            @click.stop="listClick(2,item)"
          >
            {{ item.title }}({{ item.num }})
          </div>
        </div>
      </div>

      <div class="yh_xian" />
      <div class="yh_dis topsearch_item">
        <div class="search_left">会员卡状态</div>
        <div class="search_right yh_dis">
          <div
            v-for="(item, index) in cardstatuslist"
            :key="index"
            class="sons"
            :class="search.cardstatusid === item.id ? 'choiceme' : ''"
            @click.stop="listClick(3,item)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
    <div class="yh_topsearch yh_dis yh_disJub" style="border: none; padding: 0px; margin-top: 20px">
      <div>
        <div class="block yh_dis">
          <div>
            <div class="hei20 yh_qs yh_font13">发卡时间</div>
            <el-date-picker
              v-model="search.birthday_start"
              style="width: 140px"
              size="small"
              type="date"
              placeholder="开始时间"
            />
            <el-date-picker
              v-model="search.birthday_end"
              style="width: 140px; margin-left: 5px"
              size="small"
              type="date"
              placeholder="截至日期"
            />
          </div>
          <div style="margin-left: 10px">
            <div class="hei20 yh_qs yh_font13">有效期至</div>
            <el-date-picker
              v-model="search.validity_start"
              style="width: 140px"
              size="small"
              type="date"
              placeholder="开始时间"
            />
            <el-date-picker
              v-model="search.validity_end"
              style="width: 140px; margin-left: 5px"
              size="small"
              type="date"
              placeholder="截至日期"
            />
          </div>
        </div>
        <div class="block yh_dis" style="margin-top: 10px">
          <div>
            <div class="hei20 yh_qs yh_font13">会员卡来源</div>
            <el-select v-model="search.source_id" style="width: 140px" size="small" placeholder="请选择">
              <el-option
                v-for="item in search.source"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="margin-left: 10px">
            <div class="hei20 yh_qs yh_font13">余额</div>
            <el-select v-model="search.balance_id" style="width: 140px" size="small" placeholder="请选择">
              <el-option
                v-for="item in search.balance"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div style="margin-left: 10px">
            <div class="hei20 yh_qs yh_font13">会员</div>
            <el-input v-model="search.name" placeholder="姓名/卡号" size="small" />
          </div>
          <div style="margin-left: 10px">
            <el-button
              type="primary"
              class="mar-top20 bac6b7"
              size="small"
              @click.stop="suosouClick"
            >搜索</el-button>
          </div>
        </div>
      </div>
      <div style="margin-top: 20px">
        <router-link :to="'/member/memberaddnewcard/'" style="margin-right: 20px">
          <el-button type="primary" class="bac6b7" size="small">新发卡</el-button>
        </router-link>
        <el-popover popper-class="monitor-yt-popover" placement="bottom" width="104" trigger="click">
          <div class="wid100">
            <router-link :to="'/member/importMemberCard'">
              <div class="que coFFF mar-bott5 cuPo" style="background: #6b7cdd;">批量导入</div>
            </router-link>
            <router-link :to="'/member/mCardExport'">
              <div class="que coFFF mar-bott5 cuPo" style="background: #6b7cdd;">批量导出</div>
            </router-link>
            <router-link :to="'/member/batchMCard?type=1'">
              <div class="que coFFF mar-bott5 cuPo" style="background: #6b7cdd;">批量删除</div>
            </router-link>
            <router-link :to="'/member/batchMCard?type=2'">
              <div class="que coFFF mar-bott5 cuPo" style="background: #6b7cdd;">批量延期</div>
            </router-link>
            <router-link :to="'/member/memberCardsExpireUpdate'">
              <div class="que coFFF mar-bott5 cuPo" style="background: #6b7cdd;">一键延期</div>
            </router-link>
          </div>
          <el-button slot="reference" type="primary" class="bac6b7" size="small">批量操作</el-button>
        </el-popover>
      </div>
    </div>
    <div style="margin-top: 20px">
      <el-table v-loading="listLoading" :data="tableData" stripe style="width: 100%">
        <div slot="empty" class="m-empty-box">
          <div class="mar" style="width: 168px;height: 180px;">
            <img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
          </div>
          <div class="title">暂无数据</div>
        </div>
        <el-table-column prop="realname" label="持卡人" />
        <el-table-column prop="card_number" label="卡号" />
        <el-table-column prop="card_name" label="卡名称" />
        <el-table-column prop="brand_name" label="发卡场馆" />
        <el-table-column prop="charge_card_balance" label="余额" />
        <el-table-column prop="discount_asset" label="剩余资产折算" />
        <el-table-column prop="cards_hairpin" label="发卡时间" />
        <el-table-column :key="new Date().getTime()" prop="cards_period">
          <template slot="header">
            <div class="dis disAl cuPo" @click.stop="sortClick">
              <span class="mar-right5">有效期至</span>
              <img v-if="sortImg" :src="sortImg" style="width: 12px;height: 12px;"></img>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="card_state_text" label="卡状态" />
        <el-table-column
          :label="$t('table.actions')"
          align="center"
          width="180"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <div class="yh_dis" style="justify-content: center">
              <div class="mar-right10" @click.stop="details(scope.row.id)">
                <div class="yh_dis disAl">
                  <i class="el-icon-document" style="color: #6b7cdd; font-size: 20px" />详情
                </div>
              </div>
              <el-popover
                :ref="`popover-${scope.row.id}`"
                popper-class="monitor-yt-popover"
                placement="bottom"
                width="276"
                trigger="click"
              >
                <div class="wid100 dis flwa">
                  <div
                    :class="scope.row.card_state === 1
                      ?'':'btn-card-handle-dis'"
                    class="btn-card-handle"
                    @click.stop="shuaClick(1,scope.row)"
                  >请假</div>
                  <div
                    :class="scope.row.card_state === 2 && false
                      ?'':'btn-card-handle-dis'"
                    class="btn-card-handle"
                  >取消请假</div>
                  <div
                    :class="scope.row.card_state === 2
                      ?'':'btn-card-handle-dis'"
                    class="btn-card-handle"
                    @click.stop="shuaClick(3,scope.row)"
                  >销假</div>
                  <div
                    :class="scope.row.card_state === 2
                      ?'':'btn-card-handle-dis'"
                    class="btn-card-handle"
                    @click.stop="shuaClick(4,scope.row)"
                  >延长请假
                  </div>
                  <div
                    :class="scope.row.card_state === 1
                      ?'':'btn-card-handle-dis'"
                    class="btn-card-handle"
                    @click.stop="shuaClick(5,scope.row)"
                  >停卡</div>
                  <div
                    :class="scope.row.card_state === 7
                      ?'':'btn-card-handle-dis'"
                    class="btn-card-handle"
                    @click.stop="shuaClick(6,scope.row)"
                  >解除停卡
                  </div>
                  <div
                    :class="scope.row.card_state === 1 || scope.row.card_state === 2 || scope.row.card_state === 7
                      ?'':'btn-card-handle-dis'"
                    class="btn-card-handle"
                    @click.stop="shuaClick(7,scope.row)"
                  >挂失</div>
                  <div
                    :class="scope.row.card_state === 5
                      ?'':'btn-card-handle-dis'"
                    class="btn-card-handle"
                    @click.stop="shuaClick(8,scope.row)"
                  >解挂</div>
                  <div
                    :class="scope.row.card_state === 5
                      ?'':'btn-card-handle-dis'"
                    class="btn-card-handle"
                    @click.stop="shuaClick(9,scope.row)"
                  >补卡</div>
                  <div
                    :class="scope.row.card_state === 1
                      ?'':'btn-card-handle-dis'"
                    class="btn-card-handle"
                    @click.stop="shuaClick(10,scope.row)"
                  >续卡</div>
                  <div
                    :class="scope.row.card_state === 1 || scope.row.card_state === 4
                      ?'':'btn-card-handle-dis'"
                    class="btn-card-handle"
                    @click.stop="shuaClick(11,scope.row)"
                  >卡升级
                  </div>
                  <div
                    :class="scope.row.card_state === 1 || scope.row.card_state === 4 || scope.row.card_state === 2 || scope.row.card_state === 7
                      ?'':'btn-card-handle-dis'"
                    class="btn-card-handle"
                    @click.stop="shuaClick(12,scope.row)"
                  >退卡</div>
                  <div
                    :class="scope.row.card_state === 1 || scope.row.card_state === 4 || scope.row.card_state === 2 || scope.row.card_state === 7
                      ?'':'btn-card-handle-dis'"
                    class="btn-card-handle"
                    @click.stop="shuaClick(13,scope.row)"
                  >转卡</div>
                  <div
                    :class="scope.row.card_state === 4
                      ?'':'btn-card-handle-dis'"
                    class="btn-card-handle"
                    @click.stop="shuaClick(14,scope.row)"
                  >开卡</div>
                  <div class="btn-card-handle btn-bott" @click.stop="sahnchuClick(scope.row.id)">删除
                  </div>
                  <div
                    :class="scope.row.card_state === 0 && false
                      ?'':'btn-card-handle-dis'"
                    class="btn-card-handle"
                  >签署电子合同</div>
                </div>
                <div v-show="scope.row.brand_id === venue.id" slot="reference" class="yh_dis cuPo disAl">
                  <i class="el-icon-edit foSi20" style="color: #6b7cdd;" />操作
                </div>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>
    <div v-if="shuaVisible !== 0" class="zhezhao wh100" />
    <div v-if="shuaVisible !== 0" class="zhezhaoN dis disAl disJuC wh100">
      <div class="zhezhaoWH poRel borRad10 bacFFF" style="width: 880px;">
        <div class="wid90 mar">
          <div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;border-bottom: 1px solid #d9d9d9;">
            <div class="dis disAl">
              <div v-if="shuaVisible === 1" class="foSi20 fowe800 mar-right10">请假</div>
              <div v-if="shuaVisible === 3" class="foSi20 fowe800 mar-right10">销假</div>
              <div v-if="shuaVisible === 4" class="foSi20 fowe800 mar-right10">延长请假</div>
              <div v-if="shuaVisible === 5" class="foSi20 fowe800 mar-right10">停卡</div>
              <div v-if="shuaVisible === 7" class="foSi20 fowe800 mar-right10">挂失</div>
              <div v-if="shuaVisible === 8" class="foSi20 fowe800 mar-right10">解挂</div>
              <div v-if="shuaVisible === 9" class="foSi20 fowe800 mar-right10">补卡</div>
              <div v-if="shuaVisible === 10" class="foSi20 fowe800 mar-right10">续卡</div>
              <div v-if="shuaVisible === 11" class="foSi20 fowe800 mar-right10">卡升级</div>
              <div v-if="shuaVisible === 12" class="foSi20 fowe800 mar-right10">退卡</div>
              <div v-if="shuaVisible === 13" class="foSi20 fowe800 mar-right10">转卡</div>
              <div v-if="shuaVisible === 14" class="foSi20 fowe800 mar-right10">开卡</div>
            </div>
            <svg-icon
              icon-class="guanbi"
              class="mar0 cuPo"
              style="color: #ACACAC;width: 24px;height: 24px;"
              @click.stop="shuaVisibleClick()"
            />
          </div>
          <div class="" style="padding: 20px 0;">
            <img src="../../assets/member/card/csk.jpg" style="width: 124px;height: 76px;">
            <div class="mar-top20 hei22 foSi12" style="color: #787878;">会员卡信息</div>
            <div class="dis disAl disJuB item-l mar-bott5">
              <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                <div>卡号</div>
                <div>{{ shuaItem.card_number }}</div>
              </div>
              <div class="item-p1 item-w dis disAl disJuB hei42">
                <div>卡名称</div>
                <div>{{ shuaItem.card_name }}</div>
              </div>
            </div>
            <div class="dis disAl disJuB item-l mar-bott5">
              <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                <div>持卡人</div>
                <div>{{ shuaItem.realname }}</div>
              </div>
              <div class="item-p1 item-w dis disAl disJuB hei42">
                <div>有效期至</div>
                <div>{{ shuaItem.cards_period }}</div>
              </div>
            </div>
            <div class="dis disAl disJuB item-l mar-bott5">
              <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                <div>余额1</div>
                <div>{{ shuaItem.charge_card_balance }}</div>
              </div>
              <div
                v-if="shuaVisible === 1 || shuaVisible === 3 || shuaVisible === 4"
                class="item-p1 item-w dis disAl disJuB hei42"
              >
                <div>说明</div>
                <div>{{ shuaItem.describe }}</div>
              </div>
              <div
                v-if="shuaVisible !== 1 && shuaVisible !== 3 && shuaVisible !== 4"
                class="item-p1 item-w dis disAl disJuB hei42"
              />
            </div>
            <el-form v-if="shuaVisible === 1" ref="ruleForm1" :model="ruleForm1" :rules="rules1">
              <div class="dis disAl disJuB item-l item-p1 hei42">
                <div>状态</div>
                <div>{{ shuaItem.leaves }}</div>
              </div>
              <div class="dialog-tips">
                <svg-icon icon-class="tishi" class="mar0 cuPo" style="width: 16px;height: 16px;" />
                <span class="mar-left10">请假后，卡片将暂停使用。销假后启用。到请假日期未销假自动销假。</span>
              </div>
              <div class="dis disAl disJuB item-l item-p1 hei42 mar-bott10">
                <div><span class="mar-left5" style="color: #ff0000;">*</span>请假时间</div>
                <div class="dis disAl">
                  <el-form-item class="mp0" prop="start_time">
                    <el-date-picker
                      v-model="ruleForm1.start_time"
                      style="width: 140px"
                      size="small"
                      type="date"
                      placeholder="请选择日期"
                      :picker-options="{disabledDate:dateOptions}"
                    />
                  </el-form-item>
                  <div class="mar-left15 mar-right15">至</div>
                  <el-form-item class="mp0" prop="end_time">
                    <el-date-picker
                      v-model="ruleForm1.end_time"
                      style="width: 140px"
                      size="small"
                      type="date"
                      placeholder="请选择日期"
                      :picker-options="{disabledDate:dateOptions}"
                    />
                  </el-form-item>
                  <div class="mar-left10">共{{ getDiffDay(ruleForm1.start_time,ruleForm1.end_time) }}天
                  </div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 hei42 mar-bott10">
                <el-checkbox v-model="ruleForm1.cost">收取请假费用</el-checkbox>
              </div>
              <div v-if="ruleForm1.cost" class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>请假手续费</div>
                  <el-form-item class="mp0" prop="cost_money">
                    <el-input
                      v-model="ruleForm1.cost_money"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入手续费"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>收费方式</div>
                  <el-select
                    v-model="ruleForm1.cost_pay_type"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in paytypelist"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 ">
                <div>备注</div>
                <el-input
                  v-model="ruleForm1.notes"
                  type="textarea"
                  style="width: 680px;"
                  maxlength="50"
                  :rows="4"
                  show-word-limit
                  placeholder="请输入备注"
                />
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 3" ref="ruleForm3" :model="ruleForm3" :rules="rules3">
              <div class="dis disAl disJuB item-p1 hei42 item-l">
                <div>状态</div>
                <div>{{ shuaItem.leaves }}</div>
              </div>
              <div class="dialog-tips">
                <svg-icon icon-class="tishi" class="mar0 cuPo" style="width: 16px;height: 16px;" />
                <span class="mar-left10">销假后，卡片将启用。按照实际销假日期计算本次请假时长。</span>
              </div>
              <div class="dis disAl disJuB item-p1 hei42 item-l mar-bott10">
                <div>请假日期</div>
                <div>{{ shuaItem.now_start_time }}至{{ shuaItem.now_end_time }}共{{ shuaItem.now_days }}天
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 hei42 mar-bott10">
                <div><span class="mar-left5" style="color: #ff0000;">*</span>最后结束日期</div>
                <div class="dis disAl">
                  <el-form-item class="mp0" prop="start_time">
                    <el-date-picker
                      v-model="ruleForm3.end_time"
                      style="width: 140px"
                      size="small"
                      type="date"
                      placeholder="请选择日期"
                      :picker-options="{disabledDate:dateOptions1}"
                    />
                  </el-form-item>
                  <div class="mar-left10">
                    本次实际请假{{ getDiffDay(shuaItem.now_start_time,ruleForm3.end_time) }}天
                  </div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 ">
                <div>备注</div>
                <el-input
                  v-model="ruleForm3.notes"
                  type="textarea"
                  style="width: 680px;"
                  maxlength="50"
                  :rows="4"
                  show-word-limit
                  placeholder="请输入备注"
                />
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 4" ref="ruleForm4" :model="ruleForm4" :rules="rules4">
              <div class="item-l mar-bott10">
                <div class="dis disAl disJuB item-p1 hei42">
                  <div>状态</div>
                  <div>{{ shuaItem.leaves }}</div>
                </div>
                <div class="dis disAl disJuB item-p1 hei42">
                  <div>请假日期</div>
                  <div>
                    {{ shuaItem.now_start_time }}至{{ shuaItem.now_end_time }}共{{ shuaItem.now_days }}天
                  </div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 hei42 mar-bott10">
                <div><span class="mar-left5" style="color: #ff0000;">*</span>延长请假日期至</div>
                <div class="dis disAl">
                  <el-form-item class="mp0" prop="start_time">
                    <el-date-picker
                      v-model="ruleForm4.end_time"
                      style="width: 140px"
                      size="small"
                      type="date"
                      placeholder="请选择日期"
                      :picker-options="{disabledDate:dateOptions}"
                    />
                  </el-form-item>
                  <div class="mar-left10">共{{ getDiffDay(new Date(),ruleForm4.end_time) }}天
                  </div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 hei42 mar-bott10">
                <el-checkbox v-model="ruleForm4.cost">收取延长请假费用</el-checkbox>
              </div>
              <div v-if="ruleForm4.cost" class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>请假手续费</div>
                  <el-form-item class="mp0" prop="cost_money">
                    <el-input
                      v-model="ruleForm4.cost_money"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入手续费"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>收费方式</div>
                  <el-select
                    v-model="ruleForm4.cost_pay_type"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in paytypelist"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 ">
                <div>备注</div>
                <el-input
                  v-model="ruleForm4.notes"
                  type="textarea"
                  style="width: 680px;"
                  maxlength="50"
                  :rows="4"
                  show-word-limit
                  placeholder="请输入备注"
                />
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 5" ref="ruleForm5" :model="ruleForm5" :rules="rules5">
              <div class="dialog-tips">
                <svg-icon
                  icon-class="tishi"
                  class="mar0 cuPo"
                  style="fill: #F49352;width: 16px;height: 16px;"
                />
                <span class="mar-left10">停卡后，卡片将暂停使用。解除停卡后启用。</span>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>停卡开始日期</div>
                  <el-form-item class="mp0" prop="start_time">
                    <el-date-picker
                      v-model="ruleForm5.start_time"
                      style="width: 140px"
                      size="small"
                      type="date"
                      placeholder="请选择日期"
                      :picker-options="{disabledDate:dateOptions}"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>停卡费用</div>
                  <el-checkbox v-model="ruleForm5.cost">收取停卡费用</el-checkbox>
                </div>
              </div>
              <div v-if="ruleForm5.cost" class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>请假手续费</div>
                  <el-form-item class="mp0" prop="cost_money">
                    <el-input
                      v-model="ruleForm5.cost_money"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入手续费"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>收费方式</div>
                  <el-select
                    v-model="ruleForm5.cost_pay_type"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in paytypelist"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 ">
                <div>备注</div>
                <el-input
                  v-model="ruleForm5.notes"
                  type="textarea"
                  style="width: 680px;"
                  maxlength="50"
                  :rows="4"
                  show-word-limit
                  placeholder="请输入备注"
                />
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 7" ref="ruleForm7" :model="ruleForm7" :rules="rules7">
              <div class="dialog-tips">
                <svg-icon
                  icon-class="tishi"
                  class="mar0 cuPo"
                  style="fill: #F49352;width: 16px;height: 16px;"
                />
                <span class="mar-left10"> 挂失后，卡片将立即停用。解挂启用。</span>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>会员姓名：</div>
                  <div>{{ ruleForm7.name }}</div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>会员手机号：</div>
                  <div>{{ ruleForm7.mobile }}</div>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div
                    v-if="sec == 0"
                    class="que coFFF cuPo"
                    style="background: #6b7cdd;"
                    @click.stop="getSendCode(ruleForm7.mobile)"
                  >发送验证码</div>
                  <div v-if="sec > 0" class="que coFFF cuPo" style="background: #6b7cdd;">{{ sec }}s
                  </div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>验证码：</div>
                  <el-form-item class="mp0" prop="code">
                    <el-input
                      v-model="ruleForm7.code"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入验证码"
                    />
                  </el-form-item>
                </div>
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 8" ref="ruleForm8" :model="ruleForm8" :rules="rules8">
              <div class="dialog-tips">
                <svg-icon
                  icon-class="tishi"
                  class="mar0 cuPo"
                  style="fill: #F49352;width: 16px;height: 16px;"
                />
                <span class="mar-left10">解挂后，卡片将立即启用。</span>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>会员手机号：</div>
                  <div>{{ ruleForm8.mobile }}</div>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div
                    v-if="sec == 0"
                    class="que coFFF cuPo"
                    style="background: #6b7cdd;"
                    @click.stop="getSendCode(ruleForm8.mobile)"
                  >发送验证码</div>
                  <div v-if="sec > 0" class="que coFFF cuPo" style="background: #6b7cdd;">{{ sec }}s
                  </div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>验证码：</div>
                  <el-form-item class="mp0" prop="code">
                    <el-input
                      v-model="ruleForm8.code"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入验证码"
                    />
                  </el-form-item>
                </div>
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 9" ref="ruleForm9" :model="ruleForm9" :rules="rules9">
              <div class="dialog-tips">
                <svg-icon
                  icon-class="tishi"
                  class="mar0 cuPo"
                  style="fill: #F49352;width: 16px;height: 16px;"
                />
                <span class="mar-left10">补卡后，旧卡将立即失效。</span>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span> 新卡号</div>
                  <el-form-item class="mp0" prop="card_number">
                    <el-input
                      v-model="ruleForm9.card_number"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入新卡号"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>停卡费用</div>
                  <el-checkbox v-model="ruleForm9.cost">收取停卡费用</el-checkbox>
                </div>
              </div>
              <div v-if="ruleForm9.cost" class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>补办费</div>
                  <el-form-item class="mp0" prop="cost_money">
                    <el-input
                      v-model="ruleForm9.cost_money"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入费用"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>收费方式</div>
                  <el-select
                    v-model="ruleForm9.cost_pay_type"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in paytypelist"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 ">
                <div>备注</div>
                <el-input
                  v-model="ruleForm9.notes"
                  type="textarea"
                  style="width: 680px;"
                  maxlength="50"
                  :rows="4"
                  show-word-limit
                  placeholder="请输入备注"
                />
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 10" ref="ruleForm10" :model="ruleForm10" :rules="rules10">
              <div class="hei20" />
              <div class="dis disAl disJuB item-l mar-bott5 item-p1 hei42">
                <div><span class="mar-left5" style="color: #ff0000;">*</span>续卡名称</div>
                <div class="dis disAl">
                  <el-select
                    v-model="ruleForm10.card_type"
                    class="mar-right10"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                    @change="cardTypeChange(10,ruleForm10.card_type)"
                  >
                    <el-option
                      v-for="(item,index) in cardTypeList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-select
                    v-model="ruleForm10.new_card_id"
                    class="mar-right10"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                    @change="cardChange"
                  >
                    <el-option
                      v-for="(item,index) in cardLists"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                  <div style="width: 90px;">售价：{{ cardItem.sell_price }}元</div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5 item-p1 hei42">
                <div><span class="mar-left5" style="color: #ff0000;">*</span>续卡卡号</div>
                <div>当前卡号 {{ shuaItem.card_number }}</div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>续卡后有效期至</div>
                  <el-date-picker
                    v-model="ruleForm10.cards_period"
                    style="width: 140px; margin-left: 5px"
                    size="small"
                    type="date"
                    placeholder="有效期至"
                  />
                </div>
                <div v-if="ruleForm10.card_type === 1" class="item-p1 item-w dis disAl disJuB hei42">
                  <div>余额折算到新卡（次）</div>
                  <el-form-item class="mp0" prop="discount">
                    <el-input
                      v-model="ruleForm10.discount"
                      style="width: 140px;"
                      size="small"
                      placeholder="0"
                      @blur="discountBlur"
                    />
                  </el-form-item>
                </div>
              </div>
              <div v-if="ruleForm10.card_type === 1" class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>续卡后总余额（次）</div>
                  <el-form-item class="mp0" prop="balance">
                    <el-input
                      v-model="ruleForm10.balance"
                      style="width: 140px;"
                      size="small"
                      placeholder="0"
                      @blur="balanceBlur"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>优惠（元）</div>
                  <el-form-item class="mp0" prop="discount_amount">
                    <el-input
                      v-model="ruleForm10.discount_amount"
                      style="width: 140px;"
                      size="small"
                      placeholder="0"
                      @blur="amountBlur"
                    />
                  </el-form-item>
                </div>
                <div v-if="ruleForm10.card_type === 1" class="item-p1 item-w dis disAl disJuB hei42">
                  <div>加赠（次）</div>
                  <el-form-item class="mp0" prop="add_bonus">
                    <el-input
                      v-model="ruleForm10.add_bonus"
                      style="width: 140px;"
                      size="small"
                      placeholder="0"
                      @blur="discountBlur"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>赠送积分数（分）</div>
                  <el-form-item class="mp0" prop="give_integral">
                    <el-input
                      v-model="ruleForm10.give_integral"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入积分"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>付款方式</div>
                  <el-select
                    v-model="ruleForm10.pay_type"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in paytypelist"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>优惠券</div>
                  <el-select
                    v-model="ruleForm10.coupon_id"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in couponList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>实收金额（元）</div>
                  <el-form-item class="mp0" prop="amount">
                    <el-input
                      v-model="ruleForm10.amount"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入金额"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 ">
                <div>备注</div>
                <el-input
                  v-model="ruleForm10.notes"
                  type="textarea"
                  style="width: 680px;"
                  maxlength="500"
                  :rows="4"
                  show-word-limit
                  placeholder="请输入备注"
                />
              </div>
              <div class=" dialog-tips" style="margin-top: 10px;">
                <svg-icon
                  icon-class="tishi"
                  class="mar0 cuPo"
                  style="fill: #F49352;width: 16px;height: 16px;"
                />
                <span class="mar-left10">续卡后预约签到规则均按选择的新卡的规则执行</span>
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 11" ref="ruleForm11" :model="ruleForm11" :rules="rules11">
              <div class="hei20" />
              <div class="dis disAl disJuB item-l mar-bott5 item-p1 hei42">
                <div><span class="mar-left5" style="color: #ff0000;">*</span>续卡名称</div>
                <div class="dis disAl">
                  <el-select
                    v-model="ruleForm11.card_type"
                    class="mar-right10"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                    @change="cardTypeChange(11,ruleForm11.card_type)"
                  >
                    <el-option
                      v-for="(item,index) in cardTypeList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-select
                    v-model="ruleForm11.new_card_id"
                    class="mar-right10"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                    @change="cardChange"
                  >
                    <el-option
                      v-for="(item,index) in cardLists"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                  <div style="width: 90px;">售价：{{ cardItem.sell_price }}元</div>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5 item-p1 hei42">
                <div><span class="mar-left5" style="color: #ff0000;">*</span>续卡卡号</div>
                <div>当前卡号 {{ shuaItem.card_number }}</div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>升级后有效期至</div>
                  <el-date-picker
                    v-model="ruleForm11.cards_period"
                    style="width: 140px; margin-left: 5px"
                    size="small"
                    type="date"
                    placeholder="有效期至"
                  />
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>优惠（元）</div>
                  <el-form-item class="mp0" prop="discount_amount">
                    <el-input
                      v-model="ruleForm11.discount_amount"
                      style="width: 140px;"
                      size="small"
                      placeholder="0"
                      @blur="amountBlur"
                    />
                  </el-form-item>
                </div>
                <div v-if="ruleForm11.card_type === 1" class="item-p1 item-w dis disAl disJuB hei42">
                  <div>加赠（次）</div>
                  <el-form-item class="mp0" prop="add_bonus">
                    <el-input
                      v-model="ruleForm11.add_bonus"
                      style="width: 140px;"
                      size="small"
                      placeholder="0"
                      @blur="discountBlur"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>现卡折价（元）</div>
                  <el-form-item class="mp0" prop="discount">
                    <el-input
                      v-model="ruleForm11.discount"
                      style="width: 140px;"
                      size="small"
                      placeholder="0"
                      @blur="discountBlur"
                    />
                  </el-form-item>
                </div>
                <div v-if="ruleForm11.card_type === 1" class="item-p1 item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>升级后余额（次）</div>
                  <el-form-item class="mp0" prop="balance">
                    <el-input
                      v-model="ruleForm11.balance"
                      style="width: 140px;"
                      size="small"
                      placeholder="0"
                      @blur="balanceBlur"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>赠送积分数（分）</div>
                  <el-form-item class="mp0" prop="give_integral">
                    <el-input
                      v-model="ruleForm11.give_integral"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入积分"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>付款方式</div>
                  <el-select
                    v-model="ruleForm11.pay_type"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in paytypelist"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>优惠券</div>
                  <el-select
                    v-model="ruleForm11.coupon_id"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in couponList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>实收金额（元）</div>
                  <el-form-item class="mp0" prop="amount">
                    <el-input
                      v-model="ruleForm11.amount"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入金额"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 ">
                <div>备注</div>
                <el-input
                  v-model="ruleForm11.notes"
                  type="textarea"
                  style="width: 680px;"
                  maxlength="500"
                  :rows="4"
                  show-word-limit
                  placeholder="请输入备注"
                />
              </div>
              <div class=" dialog-tips" style="margin-top: 10px;">
                <svg-icon
                  icon-class="tishi"
                  class="mar0 cuPo"
                  style="fill: #F49352;width: 16px;height: 16px;"
                />
                <span class="mar-left10">卡升级后预约签到规则均按选择的新卡的规则执行</span>
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 12" ref="ruleForm12" :model="ruleForm12" :rules="rules12">
              <div class="hei20" />
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>现卡折价</div>
                  <el-form-item class="mp0" prop="cost_money1">
                    <el-input
                      v-model="ruleForm12.cost_money1"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入金额"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>退卡手续费</div>
                  <el-form-item class="mp0" prop="cost_money">
                    <el-input
                      v-model="ruleForm12.cost_money"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入金额"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="dis disAl disJuB item-l mar-bott5">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div><span class="mar-left5" style="color: #ff0000;">*</span>协议退款金额</div>
                  <el-form-item class="mp0" prop="cost_money2">
                    <el-input
                      v-model="ruleForm12.cost_money2"
                      style="width: 140px;"
                      size="small"
                      placeholder="请输入金额"
                    />
                  </el-form-item>
                </div>
                <div class="item-p1 item-w dis disAl disJuB hei42">
                  <div>退款路径</div>
                  <el-select
                    v-model="ruleForm12.cost_pay_type"
                    style="width: 140px;"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="item in paytypelist"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="dis disAl disJuB item-l item-p1 ">
                <div>备注</div>
                <el-input
                  v-model="ruleForm12.notes"
                  type="textarea"
                  style="width: 680px;"
                  maxlength="500"
                  :rows="4"
                  show-word-limit
                  placeholder="请输入备注"
                />
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 13" ref="ruleForm13" :model="ruleForm13" :rules="rules13">
              <div v-if="yanzheng">
                <div class="dis disAl disJuB item-l mar-bott10">
                  <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                    <div><span class="mar-left5" style="color: #ff0000;">*</span>持卡会员手机号</div>
                    <div>{{ cardUser.tel }}</div>
                  </div>
                  <div class="item-p1 item-w dis disAl disJuB hei42">
                    <div
                      v-if="sec == 0"
                      class="que coFFF cuPo"
                      style="background: #6b7cdd;"
                      @click.stop="getSendCode(cardUser.tel)"
                    >发送验证码</div>
                    <div v-if="sec > 0" class="que coFFF cuPo" style="background: #6b7cdd;">{{ sec }}s
                    </div>
                  </div>
                </div>
                <div class="dis disAl disJuB item-l mar-bott10">
                  <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                    <div><span class="mar-left5" style="color: #ff0000;">*</span>验证码：</div>
                    <el-form-item class="mp0" prop="code">
                      <el-input
                        v-model="ruleForm13.code"
                        style="width: 140px;"
                        size="small"
                        placeholder="请输入验证码"
                      />
                    </el-form-item>
                  </div>
                </div>
              </div>
              <div v-if="!yanzheng">
                <div class="dialog-tips">
                  <span>转让人信息：</span>
                  <span class="mar-left30">{{ cardUser.realname }}</span>
                  <span class="mar-left10 mar-right10 foSi16">|</span>
                  <span>{{ cardUser.tel }}</span>
                  <span class="mar-left10 mar-right10 foSi16">|</span>
                  <span>{{ cardUser.sex }}</span>
                </div>
                <div class="dis disAl disJuB item-l mar-bott10">
                  <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                    <div><span class="mar-left5" style="color: #ff0000;">*</span>收卡人手机号</div>
                    <el-form-item class="mp0" prop="cost_money">
                      <el-autocomplete
                        v-model="ruleForm13.tel"
                        :fetch-suggestions="remoteMethod"
                        placeholder="姓名/手机号"
                        style="width: 140px;"
                        @select="staffChange"
                      />
                    </el-form-item>
                  </div>
                </div>
                <div
                  v-if="Object.keys(staff).length > 0"
                  class="dialog-tips "
                  style="margin-top: 10px;"
                >
                  <span>收卡人信息：</span>
                  <span class="mar-left30">{{ staff.realname }}</span>
                  <span class="mar-left10 mar-right10 foSi16">|</span>
                  <span>{{ staff.tel }}</span>
                  <span class="mar-left10 mar-right10 foSi16">|</span>
                  <span>{{ staff.sex === 1?'男':'女' }}</span>
                </div>
                <div v-if="Object.keys(staff).length === 0">
                  <div class="dis disAl disJuB item-l mar-bott10">
                    <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                      <div><span class="mar-left5" style="color: #ff0000;">*</span>姓名</div>
                      <el-form-item class="mp0" prop="cost_money">
                        <el-input
                          v-model="ruleForm13.realname"
                          style="width: 140px;"
                          size="small"
                          placeholder="姓名"
                        />
                      </el-form-item>
                    </div>
                    <div class="item-p1 item-w dis disAl disJuB hei42">
                      <div>生日</div>
                      <el-date-picker
                        v-model="ruleForm13.cards_period"
                        style="width: 140px;"
                        size="small"
                        type="date"
                        placeholder="生日"
                      />
                    </div>
                  </div>
                  <div class="dis disAl disJuB item-l mar-bott10">
                    <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                      <div>姓别</div>
                      <el-select
                        v-model="ruleForm13.sex"
                        style="width: 140px;"
                        placeholder="请选择"
                        size="small"
                      >
                        <el-option label="男" :value="1" />
                        <el-option label="女" :value="2" />
                      </el-select>
                    </div>
                  </div>
                </div>
                <div class="dis disAl disJuB item-l mar-bott10">
                  <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                    <div>手续费</div>
                    <el-checkbox v-model="ruleForm13.cost">收取转让手续费</el-checkbox>
                  </div>
                </div>
                <div v-if="ruleForm13.cost" class="dis disAl disJuB item-l mar-bott10">
                  <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                    <div>转让手续费</div>
                    <el-form-item class="mp0" prop="cost_money">
                      <el-input
                        v-model="ruleForm13.cost_money"
                        style="width: 140px;"
                        size="small"
                        placeholder="请输入手续费"
                      />
                    </el-form-item>
                  </div>
                  <div class="item-p1 item-w dis disAl disJuB hei42">
                    <div>收费方式</div>
                    <el-select
                      v-model="ruleForm13.cost_pay_type"
                      style="width: 140px;"
                      placeholder="请选择"
                      size="small"
                    >
                      <el-option
                        v-for="(item,index) in paytypelist"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </div>
                <div class="dis disAl disJuB item-l item-p1 ">
                  <div>备注</div>
                  <el-input
                    v-model="ruleForm13.notes"
                    type="textarea"
                    style="width: 680px;"
                    maxlength="500"
                    :rows="4"
                    show-word-limit
                    placeholder="请输入备注"
                  />
                </div>
              </div>
            </el-form>
            <el-form v-if="shuaVisible === 14" ref="ruleForm14" :model="ruleForm14" :rules="rules14">
              <div class="dialog-tips">
                <svg-icon
                  icon-class="tishi"
                  class="mar0 cuPo"
                  style="fill: #F49352;width: 16px;height: 16px;"
                />
                <span class="mar-left10">开卡需带卡，否则需要身份验证。</span>
              </div>
              <div class="dis disAl disJuB item-l mar-bott10">
                <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                  <div>验证</div>
                  <el-checkbox v-model="ruleForm14.cost">验证会员身份</el-checkbox>
                </div>
              </div>
              <div v-if="ruleForm14.cost">
                <div class="dis disAl disJuB item-l mar-bott10">
                  <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                    <div><span class="mar-left5" style="color: #ff0000;">*</span>会员姓名：</div>
                    <div>{{ ruleForm14.name }}</div>
                  </div>
                </div>
                <div class="dis disAl disJuB item-l mar-bott10">
                  <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                    <div><span class="mar-left5" style="color: #ff0000;">*</span>会员手机号：</div>
                    <div>{{ ruleForm14.mobile }}</div>
                  </div>
                  <div class="item-p1 item-w dis disAl disJuB hei42">
                    <div
                      v-if="sec == 0"
                      class="que coFFF cuPo"
                      style="background: #6b7cdd;"
                      @click.stop="getSendCode(ruleForm14.mobile)"
                    >发送验证码</div>
                    <div v-if="sec > 0" class="que coFFF cuPo" style="background: #6b7cdd;">{{ sec }}s
                    </div>
                  </div>
                </div>
                <div class="dis disAl disJuB item-l mar-bott10">
                  <div class="item-p1 item-bor item-w dis disAl disJuB hei42">
                    <div><span class="mar-left5" style="color: #ff0000;">*</span>验证码：</div>
                    <el-form-item class="mp0" prop="code">
                      <el-input
                        v-model="ruleForm14.code"
                        style="width: 140px;"
                        size="small"
                        placeholder="请输入验证码"
                      />
                    </el-form-item>
                  </div>
                </div>
              </div>
            </el-form>
          </div>
          <div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
            <div
              v-if="shuaVisible === 13 && yanzheng"
              class="mar-right20 que cuPo"
              style="background: #48a9f3;"
              @click.stop="yanzhengClick()"
            >验证
            </div>
            <div
              v-else
              class="mar-right20 que cuPo"
              style="background: #48a9f3;"
              @click.stop="submitForm()"
            >确认
            </div>
            <div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import {
  getXuan
} from '@/utils/limits.js'
import {
  mapGetters
} from 'vuex' // Secondary package based on el-pagination
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import {
  searchSousuo,
  cardList,
  AskForLeave,
  AskForLeaveDetails,
  cardGetUser,
  AskForLeaveExtend,
  saleLeave,
  reportLoss,
  relieveReportLoss,
  cardReplacement,
  cardRenewal,
  relieveStopCard,
  cardSearch2,
  cardSearch,
  cardDel,
  cardUpgrade,
  getCardDetails,
  stopCard,
  cardRefund,
  ActCard,
  zkCode,
  zhuanka
} from '@/api/member'
import {
  uploadimg, // 图片上传
  sendCode // 获取验证码
} from '@/api/utils'
export default {
  name: 'ArticleList',
  components: {
    Pagination
  },
  data() {
    const costMoney1 = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (!this.ruleForm1.cost) {
        callback()
      } else if (!parseFloat(value) || !value || value < 0 || len > 2) {
        callback(new Error('请输入手续费（最小单位到分）'))
      } else {
        callback()
      }
    }
    const costMoney4 = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (!this.ruleForm4.cost) {
        callback()
      } else if (!parseFloat(value) || !value || value < 0 || len > 2) {
        callback(new Error('请输入手续费（最小单位到分）'))
      } else {
        callback()
      }
    }
    const costMoney5 = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (!this.ruleForm5.cost) {
        callback()
      } else if (!parseFloat(value) || !value || value < 0 || len > 2) {
        callback(new Error('请输入手续费（最小单位到分）'))
      } else {
        callback()
      }
    }
    const costMoney9 = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (!this.ruleForm9.cost) {
        callback()
      } else if (!parseFloat(value) || !value || value < 0 || len > 2) {
        callback(new Error('请输入补办费（最小单位到分）'))
      } else {
        callback()
      }
    }
    const costMoney12 = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (Number(value) === 0) {
        callback()
      } else if (!parseFloat(value) || value < 0 || len > 2) {
        callback(new Error('请输入正数'))
      } else {
        callback()
      }
    }
    const costMoney13 = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (!this.ruleForm13.cost) {
        callback()
      } else if (!parseFloat(value) || !value || value < 0 || len > 2) {
        callback(new Error('请输入手续费（最小单位到分）'))
      } else {
        callback()
      }
    }
    const costMoney121 = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (!parseFloat(value) || !value || value < 0 || len > 2) {
        callback(new Error('请输入正数'))
      } else {
        callback()
      }
    }
    const codeValidator = (rule, value, callback) => {
      if (!value && this.ruleForm14.cost) {
        callback(new Error('请输入验证码'))
      } else {
        callback()
      }
    }
    const discountVal = (rule, value, callback) => {
      if ((this.ruleForm10.card_type === 1 && this.shuaVisible === 10) || (this.ruleForm11.card_type === 1 &&
						this.shuaVisible === 11)) {
        var len = 0
        if (value) {
          var tem = value.toString().split('.')
          len = tem.length >= 2 ? tem[1].length : 0
        }
        if (Number(value) === 0) {
          callback()
        } else if (!parseFloat(value) || !value || value < 0 || len >= 1) {
          callback(new Error('请输入正数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const balanceVal = (rule, value, callback) => {
      if ((this.ruleForm10.card_type === 1 && this.shuaVisible === 10) || (this.ruleForm11.card_type === 1 &&
						this.shuaVisible === 11)) {
        var len = 0
        if (value) {
          var tem = value.toString().split('.')
          len = tem.length >= 2 ? tem[1].length : 0
        }
        if (Number(value) === 0) {
          callback()
        } else if (!parseFloat(value) || value < 0 || len > 2) {
          callback(new Error('请输入正数'))
        } else {
          callback()
        }
      }
    }
    const discountAmount = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (!value || Number(value) === 0) {
        callback()
      } else if (!parseFloat(value) || value < 0 || len > 2) {
        callback(new Error('请输入数值,最小单位为分'))
      } else {
        callback()
      }
    }
    const giveIntegral = (rule, value, callback) => {
      var len = 0
      if (value) {
        var tem = value.toString().split('.')
        len = tem.length >= 2 ? tem[1].length : 0
      }
      if (!value) {
        callback()
      } else if (!parseFloat(value) || value < 1 || value > 10000000 || len > 2) {
        callback(new Error('请输入1-10000000之间的正整数或留空'))
      } else {
        callback()
      }
    }

    return {
      yanzheng: true,
      staff: {},
      sec: 0,
      ruleForm11: {
        card_type: 2,
        new_card_id: null,
        cards_period: null,
        discount_amount: null,
        add_bonus: null,
        balance: null,
        discount: null,
        give_integral: null,
        pay_type: 1,
        coupon_id: null,
        amount: null,
        notes: null
      },
      rules11: {
        discount: [{
          required: true,
          trigger: 'blur',
          validator: discountVal
        }],
        balance: [{
          required: true,
          trigger: 'blur',
          validator: balanceVal
        }],
        discount_amount: [{
          required: true,
          trigger: 'blur',
          validator: discountAmount
        }],
        add_bonus: [{
          required: true,
          trigger: 'blur',
          validator: balanceVal
        }],
        give_integral: [{
          required: true,
          trigger: 'blur',
          validator: giveIntegral
        }],
        amount: [{
          required: true,
          trigger: 'blur',
          validator: discountAmount
        }]

      },
      ruleForm10: {
        card_type: 2,
        new_card_id: null,
        cards_period: null,
        discount_amount: null,
        add_bonus: null,
        balance: null,
        discount: null,
        give_integral: null,
        pay_type: 1,
        coupon_id: null,
        amount: null,
        notes: null
      },
      rules10: {
        discount: [{
          required: true,
          trigger: 'blur',
          validator: discountVal
        }],
        balance: [{
          required: true,
          trigger: 'blur',
          validator: balanceVal
        }],
        discount_amount: [{
          required: true,
          trigger: 'blur',
          validator: discountAmount
        }],
        add_bonus: [{
          required: true,
          trigger: 'blur',
          validator: balanceVal
        }],
        give_integral: [{
          required: true,
          trigger: 'blur',
          validator: giveIntegral
        }],
        amount: [{
          required: true,
          trigger: 'blur',
          validator: discountAmount
        }]

      },
      couponList: [],
      cardTypeList: [{
        label: '期限',
        value: 1
      }, {
        label: '次数',
        value: 2
      }],
      cardLists: [],
      shuaItem: null,
      cardUser: null,
      ruleForm14: {
        cost: false,
        name: null,
        mobile: null,
        code: null
      },
      rules14: {
        code: [{
          required: true,
          trigger: 'blur',
          validator: codeValidator
        }]
      },
      ruleForm13: {
        mobile: null,
        code: null,
        cost: false,
        cost_money: null,
        cost_pay_type: 1,
        realname: null,
        tel: null,
        sex: 1,
        cards_period: null,
        notes: null
      },
      rules13: {
        code: [{
          required: true,
          trigger: 'blur',
          message: '请选择验证码'
        }],
        cost_money: [{
          required: true,
          trigger: 'blur',
          validator: costMoney13
        }]
      },
      ruleForm12: {
        cost_money1: null,
        cost_money2: null,
        cost_money: null,
        cost_pay_type: 1,
        notes: null
      },
      rules12: {
        card_number: [{
          required: true,
          trigger: 'blur',
          message: '请输入新卡号'
        }],
        cost_money2: [{
          required: true,
          trigger: 'blur',
          validator: costMoney121
        }],
        cost_money1: [{
          required: true,
          trigger: 'blur',
          validator: costMoney121
        }],
        cost_money: [{
          required: true,
          trigger: 'blur',
          validator: costMoney12
        }]
      },
      ruleForm9: {
        card_number: null,
        cost: false,
        cost_money: null,
        cost_pay_type: 1,
        notes: null
      },
      rules9: {
        card_number: [{
          required: true,
          trigger: 'blur',
          message: '请输入新卡号'
        }],
        cost_money: [{
          required: true,
          trigger: 'blur',
          validator: costMoney9
        }]
      },
      ruleForm8: {
        mobile: null,
        code: null
      },
      rules8: {
        code: [{
          required: true,
          trigger: 'blur',
          message: '请选择验证码'
        }]
      },
      ruleForm7: {
        name: null,
        mobile: null,
        code: null
      },
      rules7: {
        code: [{
          required: true,
          trigger: 'blur',
          message: '请选择验证码'
        }]
      },
      ruleForm5: {
        start_time: null,
        cost: false,
        cost_money: null,
        cost_pay_type: 1,
        notes: null
      },
      rules5: {
        start_time: [{
          required: true,
          trigger: 'change',
          message: '请选择日期'
        }],
        cost_money: [{
          required: true,
          trigger: 'blur',
          validator: costMoney5
        }]
      },
      ruleForm3: {
        end_time: null,
        notes: null
      },
      rules3: {
        end_time: [{
          required: true,
          trigger: 'change',
          message: '请选择日期'
        }]
      },
      ruleForm4: {
        end_time: null,
        cost: false,
        cost_money: null,
        cost_pay_type: 1,
        notes: null
      },
      rules4: {
        end_time: [{
          required: true,
          trigger: 'change',
          message: '请选择日期'
        }],
        cost_money: [{
          required: true,
          trigger: 'blur',
          validator: costMoney4
        }]
      },
      ruleForm1: {
        start_time: null,
        end_time: null,
        cost: false,
        cost_money: null,
        cost_pay_type: 1,
        notes: null
      },
      rules1: {
        start_time: [{
          required: true,
          trigger: 'change',
          message: '请选择日期'
        }],
        end_time: [{
          required: true,
          trigger: 'change',
          message: '请选择日期'
        }],
        cost_money: [{
          required: true,
          trigger: 'blur',
          validator: costMoney1
        }]
      },
      paytypelist: [{
        label: '商户扫码(微信/支付宝/云闪付)',
        value: 1
      }, {
        label: '用户扫码(收付款)',
        value: 2
      }, {
        label: '现金支付',
        value: 3
      }, {
        label: '线下支付(银行卡)',
        value: 5
      }, {
        label: '线下支付(微信)',
        value: 6
      }, {
        label: '线下支付(支付宝)',
        value: 7
      }, {
        label: '线下支付(其他)',
        value: 8
      }],
      list: null,
      total: 0,
      listLoading: false,
      cardstatuslist: [],
      cardnamelist: [],
      cardtypelist: [],
      typeoflist: [],
      search: {
        cardtypeid: 100,
        typeofid: 100,
        cardnameid: 0,
        cardstatusid: 0,
        birthday_start: '', // 发卡开始时间
        birthday_end: '', // 发卡结束时间
        validity_start: '', // 有效期开始时间
        validity_end: '', // 有效期结束时间
        source: [{
          value: 0,
          label: '不指定'
        }, {
          value: 1,
          label: '本馆发的卡'
        }, {
          value: 2,
          label: '本馆发的非通用卡'
        }], // 会员卡来源
        source_id: 0,
        balance: [{
          value: 0,
          label: '不指定'
        }, {
          value: 1,
          label: '余额为零'
        }, {
          value: 2,
          label: '余额不为零'
        }], // 余额
        balance_id: 0,
        name: null
      },
      tableData: [],
      listQuery: {
        page: 1,
        limit: 10
      },
      sort: 0,
      sortImg: require('../../icons/png/sort.png'),
      venue: '',
      shuaVisible: 0,
      cardItem: null,
      dateOptions(time) {
        return time.getTime() < Date.now() - 8.64e7
      },
      dateOptions1(time) {
        return time.getTime() >= Date.now() - 8.64e6
      }
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  destroyed() {
    // 销毁组件
    sessionStorage.removeItem('membercard')
  },
  created() {
    if (sessionStorage.getItem('membercard')) {
      // 搜索的数据
      const data = JSON.parse(sessionStorage.getItem('search'))
      this.search = data
      console.log('你走了吗', data)
    } else {
      // 其他页面第一次进入列表页，清掉缓存里面的数据
      sessionStorage.removeItem('search')
    }
    this.venue = JSON.parse(localStorage.getItem('venue'))
    var xuanList = [{
      name: '会员卡',
      url: '/member/membercard',
      pd: true
    }, {
      name: '推荐办卡人',
      url: '/member/referrer',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
    this.getSousuoList()
  },
  methods: {
    details(id) {
      sessionStorage.setItem('search', JSON.stringify(this.search))
      this.$router.push('/member/membercarddetail?id=' + id)
    },
    staffChange(e) {
      console.log(e)
      this.ruleForm13.tel = e.item.tel
      this.ruleForm13.realname = e.item.realname
      this.ruleForm13.sex = Number(e.item.sex)
      this.staff = e.item
    },
    remoteMethod(queryString, cb) {
      this.staff = {}
      cardSearch({
        keyword: queryString
      }).then(response => {
        const {
          data
        } = response
        this.staff_options = data.map((terminal) => {
          return {
            value: terminal.realname + '    ' + terminal.tel,
            item: terminal
          }
        })
        cb(this.staff_options)
      })
    },
    sahnchuClick(id) {
      this.$confirm('此操作将永久删除该会员卡, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cardDel({
          'card_id': id
        }).then(response => {
          const {
            data
          } = response
          this.getList()
        }).catch(error => {
          console.log(error)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    balanceBlur() {
      if (this.shuaVisible === 10) {
        this.ruleForm10.discount = null
        this.ruleForm10.add_bonus = null
      } else {
        this.ruleForm11.discount = null
        this.ruleForm11.add_bonus = null
      }
    },
    discountBlur() {
      if (this.shuaVisible === 10) {
        var balance = this.cardItem.balance ? Number(this.cardItem.balance) : 0
        var discount = this.ruleForm10.discount ? Number(this.ruleForm10.discount) : 0
        var add_bonus = this.ruleForm10.add_bonus ? Number(this.ruleForm10.add_bonus) : 0
        this.ruleForm10.balance = balance + discount + add_bonus
      } else {
        var balance = this.cardItem.balance ? Number(this.cardItem.balance) : 0
        var discount = this.ruleForm11.discount ? Number(this.ruleForm11.discount) : 0
        var add_bonus = this.ruleForm11.add_bonus ? Number(this.ruleForm11.add_bonus) : 0
        this.ruleForm11.balance = balance + discount + add_bonus
      }
    },
    amountBlur() {
      if (this.shuaVisible === 10) {
        var amount = this.cardItem.sell_price ? Number(this.cardItem.sell_price) : 0
        var discountAmount = this.ruleForm10.discount_amount ? Number(this.ruleForm10.discount_amount) : 0
        this.ruleForm10.amount = amount - discountAmount
      } else {
        var amount = this.cardItem.sell_price ? Number(this.cardItem.sell_price) : 0
        var discountAmount = this.ruleForm11.discount_amount ? Number(this.ruleForm11.discount_amount) : 0
        this.ruleForm11.amount = amount - discountAmount
      }
    },
    cardTypeChange(index, e) {
      console.log(index, e)
      this.getCardSearch2(index, e)
    },
    cardChange(e) {
      var dd = new Date()
      this.cardLists.forEach(item => {
        console.log(item)
        this.cardItem = item
        if (item.id === e) {
          var day = item.card_period_type === 1 ? item.card_period : item.card_period * 30
          dd.setDate(dd.getDate() + day)
          this.ruleForm10.cards_period = day
          this.ruleForm10.balance = item.card_money
          this.ruleForm10.give_integral = item.card_give_integral
          this.ruleForm10.amount = item.sell_price
        }
      })
    },
    yanzhengClick() {
      this.$refs['ruleForm13'].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm13.cost_pay_type)
          zkCode({
            'tel': this.cardUser.tel,
            'code': this.ruleForm13.code
          }).then(response => {
            const {
              data
            } = response
            if (response.code == 0) {
              this.yanzheng = false
            }
          }).catch(error => {
            // this.$message.error('请按规则填写完整信息')
            return false
          })
        } else {
          this.$message.error('请按规则填写完整信息')
          return false
        }
      })
    },
    submitForm() {
      this.$refs[this.formName].validate((valid) => {
        if (valid) {
          switch (this.shuaVisible) {
            case 1:
              var data = {
                card_id: this.shuaItem.id,
                start_time: this.ruleForm1.start_time,
                end_time: this.ruleForm1.end_time,
                cost: this.ruleForm1.cost ? 1 : 0,
                cost_money: this.ruleForm1.cost_money,
                cost_pay_type: this.ruleForm1.cost_pay_type,
                notes: this.ruleForm1.notes,
                extend: 0
              }
              AskForLeave(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 3:
              var data = {
                card_id: this.shuaItem.id,
                end_time: this.ruleForm3.end_time,
                notes: this.ruleForm3.notes
              }
              saleLeave(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 4:
              var data = {
                card_id: this.shuaItem.id,
                end_time: this.ruleForm4.end_time,
                cost: this.ruleForm4.cost ? 1 : 0,
                cost_money: this.ruleForm4.cost_money,
                cost_pay_type: this.ruleForm4.cost_pay_type,
                notes: this.ruleForm4.notes,
                extend: 1
              }
              AskForLeaveExtend(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 5:
              var data = {
                card_id: this.shuaItem.id,
                start_time: this.ruleForm5.start_time,
                cost: this.ruleForm5.cost ? 1 : 0,
                cost_money: this.ruleForm5.cost_money,
                cost_pay_type: this.ruleForm5.cost_pay_type,
                notes: this.ruleForm5.notes
              }
              stopCard(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 7:
              var data = {
                card_id: this.shuaItem.id,
                name: this.ruleForm7.name,
                mobile: this.ruleForm7.mobile,
                code: this.ruleForm7.code
              }
              reportLoss(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 8:
              var data = {
                card_id: this.shuaItem.id,
                mobile: this.ruleForm8.mobile,
                code: this.ruleForm8.code
              }
              relieveReportLoss(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 9:
              var data = {
                card_id: this.shuaItem.id,
                card_number: this.ruleForm9.card_number,
                cost: this.ruleForm9.cost ? 1 : 0,
                cost_money: this.ruleForm9.cost_money,
                cost_pay_type: this.ruleForm9.cost_pay_type,
                notes: this.ruleForm9.notes
              }
              cardReplacement(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 10:
              var data = {
                card_id: this.shuaItem.id,
                cards_period: this.ruleForm10.cards_period,
                discount_amount: this.ruleForm10.discount_amount,
                add_bonus: this.ruleForm10.add_bonus,
                balance: this.ruleForm10.balance,
                discount: this.ruleForm10.discount,
                give_integral: this.ruleForm10.give_integral,
                pay_type: this.ruleForm10.pay_type,
                coupon_id: this.ruleForm10.coupon_id,
                amount: this.ruleForm10.amount,
                notes: this.ruleForm10.notes,
                card_type: this.ruleForm10.card_type,
                new_card_id: this.ruleForm10.new_card_id
              }
              cardRenewal(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 11:
              var data = {
                card_id: this.shuaItem.id,
                cards_period: this.ruleForm11.cards_period,
                discount_amount: this.ruleForm11.discount_amount,
                add_bonus: this.ruleForm11.add_bonus,
                balance: this.ruleForm11.balance,
                discount: this.ruleForm11.discount,
                give_integral: this.ruleForm11.give_integral,
                pay_type: this.ruleForm11.pay_type,
                coupon_id: this.ruleForm11.coupon_id,
                amount: this.ruleForm11.amount,
                notes: this.ruleForm11.notes,
                card_type: this.ruleForm11.card_type,
                new_card_id: this.ruleForm11.new_card_id
              }
              cardUpgrade(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 12:
              var data = {
                card_id: this.shuaItem.id,
                cash_discount: this.ruleForm12.cost_money1,
                cost_money: this.ruleForm12.cost_money,
                out_money: this.ruleForm12.cost_money2,
                out_pay_type: this.ruleForm12.cost_pay_type,
                notes: this.ruleForm12.notes
              }
              cardRefund(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 13:
              var data = {
                card_id: this.shuaItem.id,
                give_tel: this.ruleForm13.tel,
                cost: this.ruleForm13.cost,
                money: this.ruleForm13.cost_money,
                money_name: this.paytypelist[this.ruleForm13.cost_pay_type - 1].label,
                notes: this.ruleForm13.notes
              }
              zhuanka(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })
              break
            case 14:
              // 开卡
              var data = {
                card_id: this.shuaItem.id,
                cost: this.ruleForm14.cost
              }
              if (this.ruleForm14.cost) {
                data.tel = this.ruleForm14.mobile
                data.code = this.ruleForm14.code
              }
              ActCard(data).then(response => {
                this.getList()
              }).catch(error => {
                console.log(error)
              })

              break
          }
        } else {
          this.$message.error('请按规则填写完整信息')
          return false
        }
      })
    },
    getSendCode(mobile) {
      var that = this
      sendCode({
        mobile: mobile
      }).then(response => {
        var {
          data
        } = response
        // 初始化定时器
        let t = null
        // 倒计时1分钟
        this.sec = 60
        // 计时器清零
        clearInterval(t)
        // that.sendcode()
        t = setInterval(() => {
          // 当倒计时完时，显示重新发送
          if (this.sec == 0) {
            clearInterval(t)
            return
          }
          // 实现倒计时效果
          this.sec--
        }, 1000)
      })
    },
    getDiffDay(date_1, date_2) {
      console.log(date_1)
      console.log(date_2)
      if (date_1 && date_2) {
        let totalDays, diffDate
        const myDate_1 = new Date(date_1).setHours(0, 0, 0, 0)
        const myDate_2 = new Date(date_2).setHours(0, 0, 0, 0)
        diffDate = myDate_1 - myDate_2
        totalDays = Math.floor(diffDate / (1000 * 3600 * 24))
        return Math.abs(totalDays) + 1
      } else {
        return 0
      }
    },
    getAskForLeaveDetails(index, item) {
      AskForLeaveDetails({
        card_id: item.id
      }).then(response => {
        var {
          data
        } = response
        switch (index) {
          case 1:
            this.ruleForm1 = {
              start_time: new Date(),
              end_time: new Date(),
              cost: false,
              cost_money: null,
              cost_pay_type: 1,
              notes: null
            }
            this.formName = 'ruleForm1'
            break
          case 3:
            this.ruleForm3 = {
              end_time: new Date(),
              notes: null
            }
            this.formName = 'ruleForm3'
            break
          case 4:
            this.ruleForm4 = {
              end_time: data.now_end_time,
              cost: false,
              cost_money: null,
              cost_pay_type: 1,
              notes: null
            }
            this.formName = 'ruleForm4'
            break
          case 5:
            this.ruleForm5 = {
              start_time: new Date(),
              cost: false,
              cost_money: null,
              cost_pay_type: 1,
              notes: null
            }
            this.formName = 'ruleForm5'
            break
          case 9:
            this.ruleForm9 = {
              card_number: null,
              cost: false,
              cost_money: null,
              cost_pay_type: 1,
              notes: null
            }
            this.formName = 'ruleForm9'
            break
          case 10:
            this.ruleForm10 = {
              card_type: 2,
              new_card_id: null,
              cards_period: null,
              discount_amount: null,
              add_bonus: null,
              balance: null,
              discount: null,
              give_integral: null,
              pay_type: 1,
              coupon_id: null,
              amount: null,
              notes: null
            }
            this.getCardSearch2(index, 2)
            break
          case 11:
            this.ruleForm11 = {
              card_type: 2,
              new_card_id: null,
              cards_period: null,
              discount_amount: null,
              add_bonus: null,
              balance: null,
              discount: null,
              give_integral: null,
              pay_type: 0,
              coupon_id: null,
              amount: null,
              notes: null
            }
            this.getCardSearch2(index, 2)
            break
          case 12:
            this.ruleForm12 = {
              cost_money1: null,
              cost_money2: null,
              cost_money: null,
              cost_pay_type: 1,
              notes: null
            }
            this.formName = 'ruleForm12'
            break
        }
        this.shuaItem = data
        if (index !== 10 && index !== 11) {
          this.shuaVisible = index
        }
      })
    },
    getCardGetUser(index, item) {
      cardGetUser({
        card_id: item.id
      }).then(response => {
        var {
          data
        } = response
        switch (index) {
          case 7:
            this.ruleForm7 = {
              name: data.nickname,
              mobile: data.tel,
              code: null
            }
            this.formName = 'ruleForm7'
            break
          case 8:
            this.ruleForm8 = {
              mobile: data.tel,
              code: null
            }
            this.formName = 'ruleForm8'
            break
          case 13:
            this.ruleForm13 = {
              mobile: data.tel,
              code: null,
              cost: false,
              cost_money: null,
              cost_pay_type: 1,
              realname: null,
              tel: null,
              sex: 1,
              cards_period: null,
              notes: null
            }
            this.formName = 'ruleForm13'
            break
          case 14:
            this.ruleForm14 = {
              cost: false,
              name: data.nickname,
              mobile: data.tel,
              code: null
            }
            this.formName = 'ruleForm14'
            break
        }
        this.shuaItem = item
        this.cardUser = data
        this.yanzheng = true
        this.shuaVisible = index
      })
    },
    getCardSearch2(index, type) {
      cardSearch2({
        card_type: type
      }).then(response => {
        var {
          data
        } = response
        this.cardLists = data
        var dd = new Date()
        switch (index) {
          case 10:
            if (this.cardLists.length > 0) {
              this.cardItem = this.cardLists[0]
              this.ruleForm10.new_card_id = this.cardLists[0].id
              // var day = this.cardLists[0].card_period_type === 1 ? this.cardLists[0].card_period : this.cardLists[0].card_period * 30
              var day = this.cardLists[0].card_period
              dd.setDate(dd.getDate() + day)
              this.ruleForm10.cards_period = dd
              this.ruleForm10.balance = this.cardLists[0].card_money
              this.ruleForm10.give_integral = this.cardLists[0].card_give_integral
              this.ruleForm10.amount = this.cardLists[0].sell_price
            }
            this.formName = 'ruleForm10'
            break
          case 11:
            if (this.cardLists.length > 0) {
              this.cardItem = this.cardLists[0]
              this.ruleForm11.new_card_id = this.cardLists[0].id
              var day = this.cardLists[0].card_period_type === 1 ? this.cardLists[0]
                .card_period : this.cardLists[0].card_period * 30
              dd.setDate(dd.getDate() + day)
              this.ruleForm11.cards_period = dd
              this.ruleForm11.balance = this.cardLists[0].card_money
              this.ruleForm11.giveunt = this.cardLists[0].sell_price
            }
            this.formName = 'ruleForm11'
            break
        }
        this.shuaVisible = index
      })
    },
    shuaClick(index, item) {
      switch (index) {
        case 1:
        case 5:
        case 3:
        case 4:
          if (item.card_state === 2) {
            this.getAskForLeaveDetails(index, item)
          }
          break
        case 6:
          if (item.card_state === 7) {
            this.$confirm('确定解除停卡吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              relieveStopCard({
                card_id: item.id
              }).then(response => {
                this.getList()
              })
            })
          }
          break
        case 7:
          if (item.card_state === 1 || item.card_state === 2 || item.card_state === 7) {
            this.getCardGetUser(index, item)
          }
          break
        case 8:
          if (item.card_state === 5) {
            this.getCardGetUser(index, item)
          }
          break
        case 9:
          if (item.card_state === 5) {
            this.getAskForLeaveDetails(index, item)
          }
          break
        case 10:
          if (item.card_state === 1) {
            this.getAskForLeaveDetails(index, item)
          }
          break
        case 11:
          if (item.card_state === 1 || item.card_state === 4) {
            this.getAskForLeaveDetails(index, item)
          }
          break
        case 12:
          if (item.card_state === 1 || item.card_state === 4 || item.card_state === 2 || item.card_state ===
              7) {
            this.getAskForLeaveDetails(index, item)
          }
          break
        case 13:
          if (item.card_state === 1 || item.card_state === 4 || item.card_state === 2 || item.card_state ===
              7) {
            this.getCardGetUser(index, item)
          }
          break
        case 14:
          if (item.card_state === 4) {
            this.getCardGetUser(index, item)
          }
          break_integral = this.cardLists[0].card_give_integral
          this.ruleForm11.amo
      }
    },
    shuaVisibleClick() {
      this.shuaVisible = 0
      this.sec = 0
    },
    sortClick() {
      switch (this.sort) {
        case 0:
          this.sort = 1
          this.sortImg = require('../../icons/png/sort1.png')
          break
        case 1:
          this.sort = 2
          this.sortImg = require('../../icons/png/sort2.png')
          break
        case 2:
          this.sort = 0
          this.sortImg = require('../../icons/png/sort.png')
          break
      }
      this.getList()
    },
    getSousuoList() {
      searchSousuo().then(response => {
        const {
          data
        } = response
        this.cardtypelist = data.type
        this.typeoflist = data.types
        this.cardnamelist = data.cardlist
        this.cardstatuslist = data.statuslist
        this.getList()
      }).catch(error => {
        console.log(error)
      })
    },
    suosouClick() {
      this.listQuery = {
        page: 1,
        limit: 10
      }
      this.getList()
    },
    listClick(type, item) {
      switch (type) {
        case 0:
          this.search.cardtypeid = item.id
          break
        case 1:
          this.search.typeofid = item.id
          break
        case 2:
          this.search.cardnameid = item.id
          break
        case 3:
          this.search.cardstatusid = item.id
          break
      }
      this.getList()
    },
    getList() {
      this.listLoading = true
      this.shuaVisibleClick()
      var date = {
        'page': this.listQuery.page,
        'limit': this.listQuery.limit,
        'keyword': this.search.name,
        // 'birthday_start': this.search.birthday_start,
        // 'birthday_end': this.search.birthday_end,
        'cards_period_start': this.search.validity_start,
        'cards_period_end': this.search.validity_end,
        'source_id': this.search.source_id,
        'balance': this.search.balance_id,
        'type': this.search.cardtypeid,
        'types': this.search.typeofid,
        'cardid': this.search.cardnameid,
        'cardstate': this.search.cardstatusid,
        'sort': this.sort
      }
      cardList(date).then(response => {
        const {
          data
        } = response
        this.tableData = data.data
        this.total = data.total
        this.listLoading = false
      }).catch(error => {
        console.log(error)
        this.listLoading = false
      })
    }
  }
}
</script>

<style>
	.monitor-yt-popover {
		border: 2px solid #84878d;
		padding: 20px;
	}

	.monitor-yt-popover .popper__arrow::after {
		border-bottom-color: #84878d !important;
		border-top-color: #84878d !important;
	}

	.monitor-yt-popover[x-placement^=bottom] .popper__arrow::after {
		top: 0px !important;
	}

	.monitor-yt-popover[x-placement^=top] .popper__arrow::after {
		bottom: 0px !important;
	}
</style>

<style lang="scss" scoped>
	.yh_content {
		padding: 20px;
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20px 20px 0px 20px;
	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.topsearch_item {
		/* padding: 20px; */
	}

	.search_left {
		min-width: 150px;
		font-size: 12px;
		color: #838383;
		margin-bottom: 15px;
	}

	.search_right {
		flex-wrap: wrap;
	}

	.sons {
		margin-left: 20px;
		cursor: pointer;
		font-size: 12px;
		margin-bottom: 15px;
	}

	.choiceme {
		color: #6b7cdd;
		font-size: 12px;
	}

	.yh_xian {
		border-bottom: 1px solid #e7e7e7;
		/* width: 98%; */
		margin: 0px auto;
		margin-bottom: 20px;
	}

	.yh_qs {
		color: #838383;
	}

	.yh_disJub {
		justify-content: space-between;
	}

	.yh_disJuc {
		justify-content: center;
	}

	.yh_font12 {
		font-size: 12px;
	}

	.yh_font13 {
		font-size: 13px;
	}

	.btn-card-handle {
		width: 106px;
		height: 34px;
		margin: 0 20px 8px 0;
		line-height: 34px;
		text-align: center;
		cursor: pointer;
		background: #6b7cdd;
		border-radius: 6px;
		color: #fff;
	}

	.btn-bott {
		margin-bottom: 0;
	}

	.btn-card-handle:nth-child(even) {
		margin-right: 0;
	}

	.btn-card-handle-dis {
		background: #e3e3e3;
		color: #bfbfbf;
		cursor: default;
	}

	.item-bor {
		border-right: 2px solid #fff;
	}

	.item-w {
		width: 50%;
	}

	.dialog-tips {
		height: 32px;
		line-height: 32px;
		background: #fff 8;
		padding: 0 15px;
		margin-top: 30px;
		margin-bottom: 10px;
		border: 1px dashed #6b7cdd;
		color: #6b7cdd;
	}

	::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #6b7cdd;
		border-color: #6b7cdd;
	}

	::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
		background-color: #ffffff;
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__inner:hover {
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #606266;
	}

	::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
		border-color: #fdfeff;
	}

	.zhezhaoWH {
		max-height: 840px;
		overflow: auto;
	}
</style>
